<title>数据统计型</title>

<link rel="stylesheet" href="/vendor/morris-js/morris.css">
<link rel="stylesheet" href="/vendor/chartist-js/chartist.css">
<link rel="stylesheet" href="/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.css">
<link rel="stylesheet" href="/css/examples/pages/home/analytics.css">

<div class="page animation-fade page-analytics">
    <div class="page-header">
        <h1 class="page-title">网站概况</h1>
    </div>

    <div class="page-content container-fluid">
        <div class="row" data-plugin="matchHeight" data-by-row="true">
            <div class="col-ms-12 col-xs-12 col-md-12">

                <div id="productOverviewWidget" class="widget widget-shadow">

                    <div class="widget-header padding-20">
                        <div class="btn-group dropdown chart-menu">
                            <button type="button" class="btn btn-outline btn-default dropdown-toggle btn-flat btn-sale" data-toggle="dropdown">
                                产品销售 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu animate" role="menu">
                                <li role="presentation">
                                    <a href="#" role="menuitem">销售</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem">总销售额</a>
                                </li>
                                <li role="presentation">
                                    <a href="#" role="menuitem">利润</a>
                                </li>
                            </ul>
                        </div>
                        <ul class="nav nav-pills nav-pills-rounded product-filters">
                            <li class="active">
                                <a href="#scoreLineToDay" data-toggle="tab">本日</a>
                            </li>
                            <li>
                                <a href="#scoreLineToWeek" data-toggle="tab">本周</a>
                            </li>
                            <li>
                                <a href="#scoreLineToMonth" data-toggle="tab">本月</a>
                            </li>
                        </ul>
                    </div>


                    <div class="widget-content padding-20">
                        <div class="tab-content">
                            <div class="ct-chart tab-pane active" id="scoreLineToDay"></div>
                            <div class="ct-chart tab-pane" id="scoreLineToWeek"></div>
                            <div class="ct-chart tab-pane" id="scoreLineToMonth"></div>
                        </div>
                        <div id="productOptionsData" class="text-center">
                            <div class="row no-space">

                                <div class="col-lg-3 col-sm-6 col-xs-12">
                                    <div class="counter">
                                        <div class="counter-label">UV</div>
                                        <div class="counter-number-group text-truncate">
                                            <span class="counter-number-related red-600">+</span>
                                            <span class="counter-number">681</span>
                                        </div>
                                        <div class="ct-chart" data-counter-type="productVist"></div>
                                    </div>
                                </div>


                                <div class="col-lg-3 col-sm-6 col-xs-12">
                                    <div class="counter">
                                        <div class="counter-label">IP</div>
                                        <div class="counter-number-group text-truncate">
                                            <span class="counter-number-related green-600">-</span>
                                            <span class="counter-number">522</span>
                                        </div>
                                        <div class="ct-chart" data-counter-type="productVistors"></div>
                                    </div>
                                </div>


                                <div class="col-lg-3 col-sm-6 col-xs-12">
                                    <div class="counter">
                                        <div class="counter-label">PV</div>
                                        <div class="counter-number-group text-truncate">
                                            <span class="counter-number-related green-600">-</span>
                                            <span class="counter-number">1,622</span>
                                        </div>
                                        <div class="ct-chart" data-counter-type="productPageViews"></div>
                                    </div>
                                </div>


                                <div class="col-lg-3 col-sm-6 col-xs-12">
                                    <div class="counter">
                                        <div class="counter-label">跳出率</div>
                                        <div class="counter-number-group text-truncate">
                                            <span class="counter-number-related red-600">+</span>
                                            <span class="counter-number">843</span>
                                        </div>
                                        <div class="ct-chart" data-counter-type="productBounceRate"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="col-lg-7 col-md-12 col-sm-12 col-xs-12">

                <div id="browsersFlowWidget" class="widget widget-shadow">
                    <div class="widget-header">
                        <p class="font-size-14 blue-grey-700 margin-bottom-0">浏览器</p>
                    </div>
                    <div class="widget-content">
                        <div class="col-sm-6 col-xs-12">

                            <table class="table table-analytics margin-bottom-0">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>浏览器</th>
                                    <th>访问量</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <img src="/images/browser/360.png" width="36" title="360浏览器" alt="360浏览器">
                                    </td>
                                    <td>
                                        360浏览器
                                    </td>
                                    <td>
                                        11,976
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/images/browser/sogou.png" width="36" title="搜狗浏览器" alt="搜狗浏览器">
                                    </td>
                                    <td>
                                        搜狗浏览器
                                    </td>
                                    <td>
                                        1,706
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/images/browser/ie.png" width="36" title="IE浏览器" alt="IE浏览器">
                                    </td>
                                    <td>
                                        IE浏览器
                                    </td>
                                    <td>
                                        1,677
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/images/browser/baidu.png" width="36" title="百度浏览器" alt="百度浏览器">
                                    </td>
                                    <td>
                                        百度浏览器
                                    </td>
                                    <td>
                                        1,268
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/images/browser/qq.png" width="36" title="QQ浏览器" alt="QQ浏览器">
                                    </td>
                                    <td>
                                        QQ浏览器
                                    </td>
                                    <td>
                                        915
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                        <div class="col-sm-6 col-xs-12 padding-horizontal-0">

                            <div id="browersVistsDonut"></div>


                            <div id="weekStackedBarChart"></div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-5 col-md-12 col-sm-12 col-xs-12">

                <div id="countriesVistsWidget" class="widget widget-shadow">
                    <div class="widget-header">
                        <p class="font-size-14 blue-grey-700 margin-bottom-0">访问国家</p>
                    </div>
                    <div class="widget-content padding-horizontal-30">
                        <div class="table-responsive">
                            <table class="table table-analytics margin-bottom-0 text-nowrap">
                                <thead>
                                <tr>
                                    <th class="language">语言</th>
                                    <th class="vists">国家</th>
                                    <th class="vists-percent">比重</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <img src="/images/country/china-icon.png" width="18" title="中国" alt="中国">
                                        <span class="country-name">中国</span>
                                    </td>
                                    <td>4,354,834,129</td>
                                    <td>
                                        <div class="progress progress-xs margin-bottom-0">
                                            <div class="progress-bar progress-bar-info bg-blue-600" style="width: 98%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="98" role="progressbar"></div>
                                        </div>
                                        <span class="progress-percent">98%</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/images/country/usa-icon.png" width="18" title="美国" alt="美国">
                                        <span class="country-name">美国</span>
                                    </td>
                                    <td>12,924</td>
                                    <td>
                                        <div class="progress progress-xs margin-bottom-0">
                                            <div class="progress-bar progress-bar-info bg-blue-600" style="width: 0.9%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0.9" role="progressbar"></div>
                                        </div>
                                        <span class="progress-percent">0.9%</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/images/country/uk-icon.png" width="18" title="英国" alt="英国">
                                        <span class="country-name">英国</span>
                                    </td>
                                    <td>11,246</td>
                                    <td>
                                        <div class="progress progress-xs margin-bottom-0">
                                            <div class="progress-bar progress-bar-info bg-blue-600" style="width: 0.6%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0.6" role="progressbar"></div>
                                        </div>
                                        <span class="progress-percent">0.6%</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/images/country/canada-icon.png" width="18" title="加拿大" alt="加拿大">
                                        <span class="country-name">加拿大</span>
                                    </td>
                                    <td>10,468</td>
                                    <td>
                                        <div class="progress progress-xs margin-bottom-0">
                                            <div class="progress-bar progress-bar-info bg-blue-600" style="width: 0.2%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0.2" role="progressbar"></div>
                                        </div>
                                        <span class="progress-percent">0.2%</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/images/country/germany-icon.png" width="18" title="德国" alt="德国">
                                        <span class="country-name">德国</span>
                                    </td>
                                    <td>8,246</td>
                                    <td>
                                        <div class="progress progress-xs margin-bottom-0">
                                            <div class="progress-bar progress-bar-info bg-blue-600" style="width: 0.1%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0.1" role="progressbar"></div>
                                        </div>
                                        <span class="progress-percent">0.1%</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="/images/country/australia-icon.png" width="18" title="澳大利亚" alt="澳大利亚">
                                        <span class="country-name">澳大利亚</span>
                                    </td>
                                    <td>3,675</td>
                                    <td>
                                        <div class="progress progress-xs margin-bottom-0">
                                            <div class="progress-bar progress-bar-info bg-blue-600" style="width: 0.1%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0.1" role="progressbar"></div>
                                        </div>
                                        <span class="progress-percent">0.1%</span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

<script src="/vendor/chartist-js/chartist.js"></script>
<script src="/vendor/raphael/raphael.min.js" data-name="raphael"></script>
<script src="/vendor/morris-js/morris.min.js" data-name="morris" data-deps="raphael"></script>
<script src="/vendor/matchheight/jquery.matchHeight.min.js"></script>
<script src="/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.js"></script>

<script src="/js/examples/pages/home/analytics.js" data-deps="morris"></script>
